<template>
	<view class="order">
		<!-- 收货地址 -->
		<view class="address" @tap="editadress">
			<view class="address_icon">
				<image src="../../static/image/mine/discount/area.png" mode=""></image>
			</view>
			<view class="adress_info">
				<view class="adress_info_name">
					玩累 <text>16602197016</text>
				</view>
				<view class="adress_info_detail">
					安徽省合肥市包河区滨湖区未来塔D做810
					<i class="icon">&#xe637;</i>
				</view>
			</view>
		</view>
		<view class="noadress box" @tap="addadress">
			<view class="noadress_left">
				<image src="../../static/image/mine/discount/area.png" mode=""></image>
				<view class="noadress_left_title">
					请选择收货地址
				</view>
			</view>
			<i class="icon jticon">&#xe637;</i>
		</view>
		<view class="order_product box">
			<product :productList="productList"></product>
			<view class="discount">
				<view class="discount_num">
					优惠券
					<view class="usenum">
						1张可用
					</view>
				</view>
				<view class="discount_price" @tap="choosediscount">
					-￥2.00 <i class="icon">&#xe637;</i>
				</view>
			</view>
		</view>
		<!-- 红包抵扣 -->
		<view class="deduction">
			<view class="deduction_title">
				红包抵扣 <text>￥0.2</text>
			</view>
			<switch class="onoff" color="#f73e2f" checked="true" />
		</view>
		<view class="price_info">
			<view class="price_info_item">
				<view class="price_info_title">商品金额</view>
				<view class="price_info_price">￥33.9</view>
			</view>
			<view class="price_info_item">
				<view class="price_info_title">优惠券</view>
				<view class="price_info_price price_info_price_r">-￥20</view>
			</view>
			<view class="price_info_item">
				<view class="price_info_title">红包</view>
				<view class="price_info_price price_info_price_r">-￥0.9</view>
			</view>
			<view class="price_info_item">
				<view class="price_info_title">运费</view>
				<view class="price_info_price">+￥6.00</view>
			</view>
		</view>
		<view class="logistics_remark box">
		<!-- 	<view class="logistics">
				<view class="logistics_title">
					配送费
				</view>
				<view class="logistics_price">
					快递免运费
				</view>
			</view> -->
			<view class="remark">
				<view class="remark_title">
					订单备注
				</view>
				<textarea value="" placeholder="选填,请先和商家协商一致" placeholder-class="place" />
			</view>
	<!-- 		<view class="order_price">
				<view class="order_price_num">
					共2件
				</view>
				<view class="order_price_all">
					合计：
				</view>
				<view class="order_price_price">
					￥129.00
				</view>
			</view> -->
		</view>
		<view class="order_pay box">
			<view class="order_pay_title">
				支付方式
			</view>
			<view class="order_pay_wechat">
				微信支付
			</view>
		</view>
		<view class="order_submit">
			<view class="order_submit_btn">
				<view class="order_submit_btn_price">
					<view class="all">
						合计： <text>￥17.01</text>
					</view>
				<!-- 	<view class="privilege">
						<image src="../../static/image/mine/index/privilege.png" mode=""></image>
						￥2.00
					</view> -->
				</view>
				<view class="order_submit_btn_submit" @tap="submit">
					提交订单
				</view>
			</view>
		</view>
		<uni-popup ref="submit" type="center">
			<view class="pay_success">
				<image class="success_pic" src="../../static/image/mine/index/paysuccess.png" mode=""></image>
				<view class="tips">
					订单已支付成功
				</view>
				<view class="pay_btn return_homepage" @tap="tohomepage">
					返回首页
				</view>
				<view class="pay_btn look_order" @tap="toorder">
					查看订单
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import product from '@/components/classify/product.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components:{ product, uniPopup },
		data () {
			return {
				productList: [
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '199.00',
						standard: '70mm含- 75mm ; 500g',
						num: '1'
					},
					{
						pic: '../../static/image/mine/discount/product01.png',
						title: '临潼石榴老树新鲜包邮应水果3-10斤',
						desc: '品质保障 美味新鲜',
						price: '129.00',
						line_price: '179.00',
						standard: '70mm含- 75mm ; 500g',
						num: '2'
					}
					]
			}
		},
		// watch: {
		// 	$route(to, from) {
		// 		console.log(to, from);
		// 		// 重新加载
		// 		// if (from.path == '/pageD/adress/addAdress')
		// 	}
		// },
		methods: {
			// 编辑地址
			editadress () {
				uni.navigateTo({
					url: '/pageD/adress/adress'
				})
			},
			addadress () {
				uni.navigateTo({
					url: '/pageD/adress/addAdress'
				})
			},
			choosediscount () {
				uni.navigateTo({
					url: '/pageB/order/orderdiscount'
				})
			},
			submit () {
				this.$refs.submit.open()
			},
			tohomepage () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toorder () {
				uni.navigateTo({
					url: '../../pageD/order/order'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		width: calc( 100% - 30upx);
		background-color: #FFFFFF;border-radius: 10upx;
		margin: auto;
	}
	.order {
		overflow: hidden;
		padding-bottom: 160upx;
		box-sizing: border-box;
	}
	.address {
		width: calc(100% - 30upx);
		margin: 20upx auto;
		height: 140upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding: 0 15upx 0 25upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.address_icon {
			width: 64upx;
			height: 64upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.adress_info {
			width: 600upx;
			.adress_info_name {
				font-size: 28upx;
				line-height: 28upx;
				color: #333333;
				margin-bottom: 10upx;
				text {
					font-size: 24upx;
					color: #333333;
				}
			}
			.adress_info_detail {
				font-size: 28upx;
				line-height: 28upx;
				color: #333333;
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.icon {
					position: absolute;
					font-size: 28upx;
					color: #999999;
					right: 0;
					top: 0;
				}
			}
		}
	}
	.noadress {
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20upx auto;
		padding: 0 15upx 0 25upx;
		box-sizing: border-box;
		.noadress_left {
			display: flex;
			align-items: center;
			image {
				width: 64upx;
				height: 64upx;
				margin-right: 20upx;
			}
			.noadress_left_title {
				font-size: 28upx;
				color: #333333;
			}
		}
		.jticon {
			font-size: 28upx;
			color: #999999;
		}
	}
	.order_product {
		overflow: hidden;
	
		.discount {
			
			width: 100%;
			padding: 0 15upx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.discount_num {
				font-size: 28upx;
				color: #333333;
				display: flex;
				align-items: center;
				line-height: 32upx;
				.usenum {
					height: 32upx;
					padding: 0 10upx;
					font-size: 24upx;
					color: #FFFFFF;
					line-height: 32upx;
					background-color: #f73e2f;
					margin-left: 10upx;
				}
			}
			.discount_price {
				width: 480upx;
				padding: 30upx 0;
				box-sizing: border-box;
				border-top: 2upx solid #E1E1E1;
				text-align: right;
				font-size: 28upx;
				color: #f73e2f;
				.icon {
					font-size: 28upx;
					color: #999999;
					margin-left: 10upx;
				}
			}
		}
	}
	.deduction {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 30upx);
		height: 100upx;
		background-color: #FFFFFF;
		margin: auto;
		margin-top: 20upx;
		border-radius: 10upx;
		padding: 0 15upx;
		box-sizing: border-box;
		line-height: 28upx;
		.deduction_title {
			font-size: 28upx;
			color: #333333;
			text {
				font-weight: bold;
				color: #f73e2f;
				margin-left: 10upx;
			}
		}
		.onoff {
			transform: scale(0.5);
			margin-right: -26upx;
		}
	}
	.logistics_remark {
		margin-top: 20upx;
		padding: 0 15upx;
		box-sizing: border-box;
		overflow: hidden;
		.logistics {
			height: 110upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #E1E1E1;
			.logistics_title {
				font-size: 28upx;
				color: #333333;
			}
			.logistics_price {
				font-size: 28upx;
				color: #333333;
			}
		}
		.remark {
			display: flex;
			margin: 20upx 0;
			.remark_title {
				width: 140upx;
				font-size: 28upx;
				color: #333333;
			}
			textarea {
				flex: 1;
				height: 120upx;
				font-size: 28upx;
				line-height: 40upx;
				color: #333333;
			}
		}
	}
	.order_price {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		margin-bottom: 10upx;
		.order_price_num {
			font-size: 24upx;
			color: #999999;
		}
		.order_price_all {
			font-size: 28upx;
			color: #333333;
			margin-left: 10upx;
		}
		.order_price_price {
			font-size: 28upx;
			color: #f73e2f;
		}
	}
	.order_pay {
		margin-top: 20upx;
		padding: 0 15upx;
		box-sizing: border-box;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.order_pay_title {
			font-size: 28upx;
			color: #333333;
		}
		.order_pay_wechat {
			font-size: 28upx;
			color: #f73e2f;
		}
	}
	.order_submit {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 140upx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		.order_submit_btn {
			width: calc(100% - 30upx);
			height: 90upx;
			border-radius: 10upx;
			overflow: hidden;
			display: flex;
		}
		.order_submit_btn_price {
			width: 540upx;
			height: 100%;
			background-color: #333333;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30upx;
			box-sizing: border-box;
			.all {
				font-size: 28upx;
				color: #FFFFFF;
				text {
					color: #f73e2f;
				}
			}
			.privilege {
				margin-top: 4upx;
				display: flex;
				align-items: center;
				line-height: 32upx;
				font-size: 24upx;
				color: #f73e2f;
				image {
					width: 29upx;
					height: 26upx;
				}
			}
		}
		.order_submit_btn_submit {
			flex: 1;
			height: 100%;
			font-size: 32upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 90upx;
			background: linear-gradient(to right,#f73e2f 0% , #fc5c2f 100%);
		}
	}
	.pay_success {
		width: 510upx;
		height: 528upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding-top: 200upx;
		box-sizing: border-box;
		position: relative;
		.success_pic {
			width: 722upx;
			height: 507upx;
			position: absolute;
			left: 50%;
			top: -40%;
			transform: translate(-50%);
		}
		.tips {
			font-size: 28upx;
			color: #333333;
			font-weight: bold;
			text-align: center;
		}
		.pay_btn {
			width: 340upx;
			height: 80upx;
			font-size: 32upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			margin: auto;
		}
		.return_homepage {
			background: linear-gradient(to right,#f73e2f 0%,#fc5c2f 100%);
			box-shadow: 0 0 6upx 0 #fc5c2f;
			margin-top: 50upx;
		}
		.look_order {
			background: linear-gradient(to right,#999999 0%,#e1e1e1 100%);
			box-shadow: 0 0 6upx 0 #e1e1e1;
			margin-top: 30upx;
		}
	}
	.price_info {
		width: calc(100% - 30upx);
		margin: auto;
		margin-top: 20upx;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding: 0 15upx;
		box-sizing: border-box;
		.price_info_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.price_info_title {
				font-size: 28upx;
				color: #333333;
				line-height: 60upx;
			}
			.price_info_price {
				font-size: 28upx;
				color: #333333;
				line-height: 60upx;
			}
			.price_info_price_r {
				color: #f73e2f;
			}
		}
	}
</style>
